<template>
  <div class="testApp">
    <mid-dialog></mid-dialog>
    <!-- <abc></abc> -->
    <!-- <data-panel1 type="meetingNumber" desc="用户数量" number=10086></data-panel1> -->
    <!-- <data-panel2 type="today_b" desc="会议数量" number=10086></data-panel2> -->
    <!-- <div id="myChart" :style="{ width: '1500px', height: '450px' }"></div> -->
  </div>
</template>

<script>

require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {

  // name: 'Home',
  // components: {
  //   HelloWorld
  // },
  data () {
    return {
    }
  },
  mounted () {
    // this.loadLine()
  },
  methods: {
    loadLine () {
      const option = {
        tooltip: {
          trigger: 'axis',
          // formatter: () => {
          //   return ''
          // },
          // position: function (point, params, dom, rect, size) {
          //   // 固定在顶部
          //   // console.log(dom)
          // },
          axisPointer: {
            lineStyle: {
              width: 2,
              color: 'rgba(0,0,0,0.15)'
            }
          }
        },
        legend: {
          data: ['浓度数据'],
          right: 180,
          icon: 'circle',
          itemHeight: 8,
          textStyle: {
            color: '#304EEC'
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        // color: ['#019688', '#119AC2'],
        xAxis: [
          {
            axisLine: {
              show: false
            },
            axisLabel: { color: '#666666', align: 'left', margin: 18, padding: [0, 0, 0, -10] },
            type: 'category',
            boundaryGap: false,
            data: [
              '2020-10-01 ',
              '2020-10-01 ',
              '2020-10-01',
              '2020-10-01 ',
              '2020-10-01 ',
              '2020-10-01 ',
              '2020-10-01'
            ],
            // axisLabel: {
            //   rotate: 25,
            // },
            // splitLine: {
            //   show: true,
            //   lineStyle: {
            //     width: 1,
            //     type: 'dashed',
            //     color: 'rgba(226,226,226,0.5)',
            //   },
            // },
            axisTick: {
              // 轴刻度线
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '浓度数据',
            max: 0.5,
            nameLocation: 'end',
            interval: 0.1,
            axisTick: {
              // 轴刻度线
              show: false
            },
            // 刻度文字颜色
            axisLabel: { color: '#666666', margin: 23 },
            // y轴刻度设置
            axisLine: {
              show: false
            },
            // y轴分隔线设置
            splitLine: {
              lineStyle: {
                type: 'dashed',
                height: 1,
                color: '#ccc'
              }
            },
            // y轴分隔区域设置
            splitArea: {
              show: true,
              areaStyle: {
                color: ' #fff'
              }
            }
          }
        ],
        series: [
          {
            name: '浓度数据',
            type: 'line',
            showSymbol: false,
            data: [0.2, 0.3, 0.27, 0.23, 0.45, 0.17, 0.15],
            smooth: true,
            symbolSize: 7,
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#e7ebfd'
                  },
                  {
                    offset: 1,
                    color: '#fff'
                  }
                ])
              }
            },
            label: {
              show: true,
              formatter: function (params) {
                console.dir(params)
              }
              //   color: '#fff',
              //   position: 'right',
              //   backgroundColor: 'rgba(27,31,53,1)',
              //   padding: 20,
              //   formatter: '{b} \n{a}:{c}'
              //   // width: 106,
              //   // height: 52,
              //   // lineHeight: 26
              //   // rich: {
              //   //   a: {
              //   //     fontSize: 18
              //   //   },
              //   //   c: {
              //   //     fontSize: 18
              //   //   },
              //   //   b: {
              //   //     fontSize: 12
              //   //   }
              //   // }
            },
            itemStyle: {
              normal: {
                color: '#304eec',
                borderWidth: 4,
                borderColor: '#304eec',
                lineStyle: {
                  width: 6,
                  shadowColor: 'rgba(48,78,236,0.09)',
                  shadowBlur: 5,
                  shadowOffsetX: 0,
                  shadowOffsetY: 12,
                  color: {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0.07,
                        color: '#929aff' // 0% 处的颜色
                      },
                      {
                        offset: 0.5,
                        color: '#596bfd'
                      },
                      {
                        offset: 0.92,
                        color: '#929aff' // 100% 处的颜色
                      }
                    ],
                    global: false
                  }
                }
              }
            }
          }
        ]
      }
      this.myChartOne = this.$echarts.init(document.getElementById('myChart'))
      this.myChartOne.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
